<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        h3 { text-align: center; }
        .wrapper { border: 1px solid blue; margin: 15px auto; }
    </style>
</head>
<body>

    <h3>处理Servlet请求</h3>

    <div class="wrapper">
        <h5>解析HTTP请求</h5>
        <a href="/parse">发送请求(`/parse`)</a>
        <form action="/parse" method="get">
            采用GET方式提交表单:
            <input type="text" name="username" placeholder="用户名">
            <input type="text" name="nickname" placeholder="昵称">
            <button type="submit">提交</button>
        </form>
        <!-- 用 enctype 指定浏览器对表单中数据的处理方式 -->
        <form action="/parse" method="post" enctype="application/x-www-form-urlencoded">
            采用POST方式提交表单:
            <input type="text" name="username" placeholder="用户名">
            <input type="text" name="nickname" placeholder="昵称">
            <button type="submit">提交</button>
            (enctype="application/x-www-form-urlencoded")
        </form>
        <form action="/parse" method="post" enctype="text/plain">
            采用POST方式提交表单:
            <input type="text" name="username" placeholder="用户名">
            <input type="text" name="nickname" placeholder="昵称">
            <button type="submit">提交</button>
            (enctype="text/plain")
        </form>
        <form action="/parse" method="post" enctype="multipart/form-data">
            采用POST方式提交表单:
            <input type="text" name="username" placeholder="用户名">
            <input type="text" name="nickname" placeholder="昵称">
            <button type="submit">提交</button>
            (enctype="multipart/form-data")
        </form>
    </div>

    <div class="wrapper">
        <h5>获取请求参数</h5>
        <a href="/param?username=sanfeng&nickname=三丰">发送请求(`/param`)</a>
        <form action="/param" method="get">
            采用GET方式提交表单:
            <input type="text" name="username" placeholder="用户名">
            <input type="text" name="nickname" placeholder="昵称">
            <button type="submit">提交</button>
        </form>
        <!-- 用 enctype 指定浏览器对表单中数据的处理方式 -->
        <form action="/param" method="post" enctype="application/x-www-form-urlencoded">
            采用POST方式提交表单:
            <input type="text" name="username" placeholder="用户名">
            <input type="text" name="nickname" placeholder="昵称">
            <button type="submit">提交</button>
            (enctype="application/x-www-form-urlencoded")
        </form>
    </div>

    <div class="wrapper">
        <h5>获取请求参数</h5>
        <form action="/plain" method="post" enctype="text/plain">
            采用POST方式提交表单:
            <input type="text" name="username" placeholder="用户名">
            <input type="text" name="nickname" placeholder="昵称">
            <button type="submit">提交</button>
            (enctype="text/plain")
        </form>
    </div>

    <div class="wrapper">
        <h5>获取FormData数据</h5>
        <form action="/form/data" method="post" enctype="multipart/form-data">
            <p>采用POST方式提交表单(enctype="multipart/form-data"):</p>
            <p>
                <input type="text" name="realName" placeholder="姓名">
            </p>
            <p>
                <input type="radio" name="gender" value="male" id="gender-male">
                <label for="gender-male">靓仔</label>
                <input type="radio" name="gender" value="female" id="gender-female">
                <label for="gender-female">靓妹</label>
            </p>
            <p>
                <input type="checkbox" name="hobby" value="sleep" id="hobby-sleep">
                <label for="hobby-sleep">睡觉(尤其是上课时)</label>
                <input type="checkbox" name="hobby" value="eat" id="hobby-eat">
                <label for="hobby-eat">吃</label>
                <input type="checkbox" name="hobby" value="eat-ji" id="hobby-eat-ji">
                <label for="hobby-eat-ji">吃鸡</label>
            </p>
            <p>
                <select name="province">
                    <optgroup label="省份">
                        <option value="gansu">甘肃省</option>
                        <option value="shaanxi">陕西省</option>
                        <option value="shanxi">山西省</option>
                    </optgroup>
                    <optgroup label="自治区">
                        <option value="ningxia">宁夏回族自治区</option>
                        <option value="xinjiang">新疆维吾尔自治区</option>
                        <option value="xizang">西藏藏族自治区</option>
                        <option value="guangxi">广西壮族自治区</option>
                        <option value="neimenggu">内蒙古自治区</option>
                    </optgroup>
                </select>
            </p>
            <p>
                <input type="file" name="upfile">
            </p>
            <button type="submit">提交</button>
        </form>
    </div>

    <div class="wrapper">
        <h5>单文件上传</h5>
        <form action="/upload/single" method="post" enctype="multipart/form-data">
            选择文件:
            <input type="file" name="upfile">
            <button type="submit">上传</button>
            (method="post" enctype="multipart/form-data")
        </form>
    </div>

    <div class="wrapper">
        <h5>多文件上传</h5>
        <form action="/upload/multiple" method="post" enctype="multipart/form-data">
            <p>
                用单个文件选择控件选择多个文件:
                <br>
                <input type="file" name="upfile" multiple>
            </p>
            <p>
                在每个文件选择控件中选择单个文件:
                <br>
                <input type="file" name="upfile">
                <br>
                <input type="file" name="upfile">
                <br>
                <input type="file" name="upfile">
            </p>
            <button type="submit">上传</button>
        </form>
    </div>

</body>
</html>